<template>
  <div class="app-container">
      <span class="holidayRecord">最近5条请假记录</span>

      <el-table
      style="margin-top:1%"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="工号" width="110">
        <template slot-scope="scope">{{ scope.row.staffNumber }}</template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="所属部门" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="请假原因">
        <template slot-scope="scope">{{ scope.row.holidayExplain }}</template>
      </el-table-column>
      <el-table-column label="起始时间" width="110" align="center">
        <template slot-scope="scope">{{ formatTime(scope.row.beginTime,"YYYY-MM-DD") }}</template>
      </el-table-column>
      <el-table-column label="结束时间" width="110" align="center">
        <template slot-scope="scope">{{ formatTime(scope.row.endTime,"YYYY-MM-DD") }}</template>
      </el-table-column>
      <el-table-column label="是否批准" width="110" align="center">
        <template slot-scope="scope">{{ judgeApproval(scope.row.approval) }}</template>
      </el-table-column>
    </el-table>
      <br><br>
    <el-form ref="form" :model="form" label-width="120px">

      <el-form-item label="起始日期">
        <el-col :span="11">
          <el-date-picker v-model="form.beginTime" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>

      <el-form-item label="结束日期">
        <el-col :span="11">
          <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>

      <el-form-item label="请假原因">
        <el-input v-model="form.holidayExplain" type="textarea" maxlength="254" show-word-limit />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pushData()">提交申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { askForHoliday } from '@/api/table'
import { searchOneHolidayRecord } from '@/api/table'
import app from '@/store/modules/app'
export default {
  data() {
    return {
      form: {
        staffNumber:'',
        beginTime: '',
        endTime: '',
        holidayExplain: '',
      },
      listLoading: true,
      list:null,
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
      judgeApproval(approval){
          if(approval==null){
              return "未审批"
          }
          else if(approval=='1'){
              return "是"
          }
          else{
              return "否"
          }
      },
    formatTime(time, format) {
      return this.$moment(time)
        .utcOffset(8)
        .format(format);
    },
    fetchData() {
      this.listLoading = true;
      this.form.staffNumber=this.$store.state.user.staffNumber
      searchOneHolidayRecord({staffNumber:this.form.staffNumber}).then(res => {
        this.list = res.data.data;
        this.listLoading = false;
      })
      .catch(err=>{
          console.log('err :>> ', err);
      });
    },
    pushData(){
        if(this.form.beginTime==null || this.form.beginTime==''){
            this.$message.error("起始日期不能为空！")
            return ;
        }
        if(this.form.endTime==null || this.form.endTime==''){
            this.$message.error("结束日期不能为空！")
            return ;
        }
        if(this.form.beginTime>this.form.endTime){
            this.$message.error("开始日期必须早于结束日期！")
            return 
        }
        if(this.form.holidayExplain==null || this.form.holidayExplain==''){
            this.$message.error("请假原因不能为空！")
            return ;
        }
        askForHoliday(this.form)
        .then(res=>{
            this.$message.success(res.data.data)
            this.fetchData()
        })
        .catch(err=>{
            this.$message.error("抱歉，服务器宕机了...")
        })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.holidayRecord{
    margin-left: 1%;
    color:gray;
    font-size: 22px;
}
</style>

